// import React, { useState, useEffect } from "react";
// import styles from "./Material.module.scss";
// import hl from "../../assets/婚礼.png";
// import hl1 from "../../assets/婚礼1.png";
// import open from "../../assets/开.png";
// import y from "../../assets/元.png";
// import yx from "../../assets/元宵.png";
// import jia from "../../assets/佳.png";
// import lang from "../../assets/浪.png";
// import { Button } from "antd";

// // 模拟模板数据
// const generateTemplateData = () => {
//   const baseData = [
//     {
//       id: 1,
//       name: "H5",
//       isRecommended: false,
//       imageUrl: hl,
//     },
//     {
//       id: 2,
//       name: "海报",
//       isRecommended: false,
//       imageUrl: hl1,
//     },
//     {
//       id: 3,
//       name: "作品",
//       isRecommended: false,
//       imageUrl: open,
//     },
//     {
//       id: 4,
//       name: "文章",
//       isRecommended: false,
//       imageUrl: lang,
//     },
//     {
//       id: 5,
//       name: "表单",
//       isRecommended: false,
//       imageUrl: y,
//     },
//     {
//       id: 6,
//       name: "长页",
//       isRecommended: false,
//       imageUrl: yx,
//     },
//     {
//       id: 7,
//       name: "长页",
//       isRecommended: false,
//       imageUrl: jia,
//     },
//   ];
//   const totalCount = 20; // 模拟 20 条数据
//   const templateData = [];
//   for (let i = 0; i < totalCount; i++) {
//     const index = i % baseData.length;
//     templateData.push({
//       id: i + 1,
//       ...baseData[index],
//     });
//   }
//   return templateData;
// };

// const templateData = generateTemplateData();
// console.log(templateData);
// // 每页加载的数据数量
// const PAGE_SIZE = 4;

// const Material = () => {
//   // 搜索关键词状态
//   const [searchTerm, setSearchTerm] = useState("");
//   // 筛选后的模板数据
//   const [filteredTemplates, setFilteredTemplates] = useState(templateData);
//   // 原始模板数据
//   const [originalTemplateData, setOriginalTemplateData] =
//     useState(templateData);
//   // 选中的模板id数组
//   const [selectedTemplateIds, setSelectedTemplateIds] = useState([]);
//   // 全选状态
//   const [isAllSelected, setIsAllSelected] = useState(false);
//   const [isck, setisck] = useState(true);
//   const [isshow, setisshow] = useState(false);
//   // 存储当前页码，初始为 0
//   const [currentPage, setCurrentPage] = useState(0);
//   // 存储当前显示的数据
//   const [displayData, setDisplayData] = useState([]);
//   // 标记是否还有更多数据可加载
//   const [hasMore, setHasMore] = useState(true);
//   // 标记是否正在加载数据
//   const [isLoading, setIsLoading] = useState(false);

//   // 加载数据的函数
//   const loadData = async () => {
//     setIsLoading(true); // 开始加载，设置加载状态为 true
//     const startIndex = currentPage * PAGE_SIZE;
//     const endIndex = startIndex + PAGE_SIZE;
//     const newData = filteredTemplates.slice(startIndex, endIndex);

//     // 模拟一个异步加载过程，实际使用中可替换为真实的 API 请求
//     await new Promise((resolve) => setTimeout(resolve, 500));

//     // 如果新数据为空，说明没有更多数据了
//     if (newData.length === 0) {
//       setHasMore(false);
//     } else {
//       // 合并新数据到已显示的数据中
//       setDisplayData((prevData) => [...prevData, ...newData]);
//       // 页码加 1
//       setCurrentPage((prevPage) => prevPage + 1);
//     }
//     setIsLoading(false); // 加载完成，设置加载状态为 false
//   };

//   // 组件挂载时加载第一页数据
//   useEffect(() => {
//     loadData();
//   }, []);

//   // 监听滚动事件
//   useEffect(() => {
//     const handleScroll = () => {
//       // 当滚动到底部且还有更多数据且不在加载中时加载新数据
//       if (
//         window.innerHeight + window.scrollY >= document.body.offsetHeight &&
//         hasMore &&
//         !isLoading
//       ) {
//         loadData();
//       }
//     };

//     // 添加滚动事件监听器
//     window.addEventListener("scroll", handleScroll);

//     // 组件卸载时移除滚动事件监听器，避免内存泄漏
//     return () => {
//       window.removeEventListener("scroll", handleScroll);
//     };
//   }, [hasMore, isLoading]);

//   const show = () => {
//     setisshow(!isshow);
//     setisck(!isck);
//   };

//   // 筛选模板
//   const filterTemplates = () => {
//     let filtered = templateData.filter((template) => {
//       return template.name.toLowerCase().includes(searchTerm.toLowerCase());
//     });
//     setFilteredTemplates(filtered);
//     setCurrentPage(0); // 重置页码
//     setDisplayData([]); // 清空显示数据
//     setHasMore(true); // 重置是否还有更多数据的状态
//     loadData(); // 重新加载数据
//   };

//   // 处理搜索输入变化
//   const handleSearch = (e) => {
//     setSearchTerm(e.target.value);
//     filterTemplates();
//   };

//   // 处理单个模板选择
//   const handleTemplateSelect = (templateId) => {
//     if (selectedTemplateIds.includes(templateId)) {
//       setSelectedTemplateIds(
//         selectedTemplateIds.filter((id) => id !== templateId)
//       );
//     } else {
//       setSelectedTemplateIds([...selectedTemplateIds, templateId]);
//     }
//     updateAllSelectedState();
//   };

//   // 处理全选
//   const handleSelectAll = () => {
//     if (isAllSelected) {
//       setSelectedTemplateIds([]);
//       setIsAllSelected(false);
//     } else {
//       setSelectedTemplateIds(filteredTemplates.map((template) => template.id));
//       setIsAllSelected(true);
//     }
//   };

//   // 更新全选状态
//   const updateAllSelectedState = () => {
//     setIsAllSelected(selectedTemplateIds.length === filteredTemplates.length);
//   };

//   // 处理设置为推荐
//   const handleSetRecommended = () => {
//     // 这里可以添加调用后端接口等实际逻辑，目前仅打印选中的id
//     console.log("设置为推荐的模板id:", selectedTemplateIds);
//     // 模拟更新数据，实际应用中需要和后端交互
//     const updatedTemplates = filteredTemplates.map((template) => {
//       if (selectedTemplateIds.includes(template.id)) {
//         return { ...template, isRecommended: true };
//       }
//       return template;
//     });
//     setFilteredTemplates(updatedTemplates);
//     // 更新 displayData 以反映推荐状态的变化
//     setDisplayData(
//       displayData.map((item) => {
//         if (selectedTemplateIds.includes(item.id)) {
//           return { ...item, isRecommended: true };
//         }
//         return item;
//       })
//     );
//   };

//   // 处理清空筛选条件
//   const handleClearFilters = () => {
//     setSearchTerm("");
//     setFilteredTemplates(originalTemplateData);
//     setSelectedTemplateIds([]);
//     setIsAllSelected(false);
//     setCurrentPage(0); // 重置页码
//     setDisplayData([]); // 清空显示数据
//     setHasMore(true); // 重置是否还有更多数据的状态
//     loadData(); // 重新加载数据
//   };

//   // 取消收藏
//   const handleClear = () => {
//     // 过滤掉选中的模板
//     const newOriginalTemplates = originalTemplateData.filter(
//       (template) => !selectedTemplateIds.includes(template.id)
//     );
//     setOriginalTemplateData(newOriginalTemplates);

//     const newFilteredTemplates = filteredTemplates.filter(
//       (template) => !selectedTemplateIds.includes(template.id)
//     );
//     setFilteredTemplates(newFilteredTemplates);

//     // 清空选中的模板id数组
//     setSelectedTemplateIds([]);
//     // 重置全选状态
//     setIsAllSelected(false);
//     setCurrentPage(0); // 重置页码
//     setDisplayData([]); // 清空显示数据
//     setHasMore(true); // 重置是否还有更多数据的状态
//     loadData(); // 重新加载数据
//   };

//   return (
//     <div className={styles.container}>
//       {/* 搜索输入框 */}
//       <input
//         type="text"
//         placeholder="搜索模板"
//         value={searchTerm}
//         onChange={handleSearch}
//         className={styles.searchInput}
//       />
//       {isck && (
//         <div className={styles.ck}>
//           <a href="">查看团队/企业模版</a>
//           <Button onClick={show}>批量管理</Button>
//         </div>
//       )}
//       {/* 筛选和操作按钮容器 */}
//       <div className={styles.filterContainer}>
//         {/* 操作按钮 */}
//         {isshow && (
//           <div className={styles.btn}>
//             <button onClick={handleClearFilters} className={styles.button}>
//               清空筛选条件
//             </button>
//             <button onClick={handleSelectAll} className={styles.button}>
//               全选
//             </button>
//             <button onClick={handleClear} className={styles.button}>
//               取消收藏
//             </button>
//             <button onClick={handleSetRecommended} className={styles.button}>
//               设置为推荐
//             </button>
//             <button onClick={show} className={styles.button}>
//               完成
//             </button>
//           </div>
//         )}
//       </div>

//       {/* 模板列表 */}
//       <div className={styles.templateList}>
//         {displayData.map((template) => (
//           <div key={template.id} className={styles.templateItem}>
//             <input
//               type="checkbox"
//               checked={selectedTemplateIds.includes(template.id)}
//               onChange={() => handleTemplateSelect(template.id)}
//               className={styles.templateCheckbox}
//             />
//             <div className={styles.templateInfo}>
//               <span>
//                 {template.name} - {template.isRecommended ? "已推荐" : "未推荐"}
//               </span>
//               <img
//                 src={template.imageUrl}
//                 alt={template.name}
//                 className={styles.templateImage}
//               />
//             </div>
//           </div>
//         ))}
//         {isLoading && <p>Loading...</p>}
//         {!hasMore && <p>No more data to load.</p>}
//       </div>
//     </div>
//   );
// };

// export default Material;

import React, { useState, useEffect, useRef } from "react";
import styles from "./Material.module.scss";
import hl from "../../assets/婚礼.png";
import hl1 from "../../assets/婚礼1.png";
import open from "../../assets/开.png";
import y from "../../assets/元.png";
import yx from "../../assets/元宵.png";
import jia from "../../assets/佳.png";
import lang from "../../assets/浪.png";
import { Button } from "antd";

// 模拟模板数据
const generateTemplateData = () => {
  const baseData = [
    {
      id: 1,
      name: "H5",
      isRecommended: false,
      imageUrl: hl,
    },
    {
      id: 2,
      name: "海报",
      isRecommended: false,
      imageUrl: hl1,
    },
    {
      id: 3,
      name: "作品",
      isRecommended: false,
      imageUrl: open,
    },
    {
      id: 4,
      name: "文章",
      isRecommended: false,
      imageUrl: lang,
    },
    {
      id: 5,
      name: "表单",
      isRecommended: false,
      imageUrl: y,
    },
    {
      id: 6,
      name: "长页",
      isRecommended: false,
      imageUrl: yx,
    },
    {
      id: 7,
      name: "长页",
      isRecommended: false,
      imageUrl: jia,
    },
  ];
  const totalCount = 20; // 模拟 20 条数据
  const templateData = [];
  for (let i = 0; i < totalCount; i++) {
    const index = i % baseData.length;
    templateData.push({
      id: i + 1,
      ...baseData[index],
    });
  }
  return templateData;
};

const templateData = generateTemplateData();
console.log(templateData);
// 每页加载的数据数量
const PAGE_SIZE = 4;

const Material = () => {
  // 搜索关键词状态
  // const [searchTerm, setSearchTerm] = useState("");
  const searchTerm = useRef('')
  // 筛选后的模板数据
  const [filteredTemplates, setFilteredTemplates] = useState(templateData);
  // 原始模板数据
  const [originalTemplateData, setOriginalTemplateData] =
    useState(templateData);
  // 选中的模板id数组
  const [selectedTemplateIds, setSelectedTemplateIds] = useState([]);
  // 全选状态
  const [isAllSelected, setIsAllSelected] = useState(false);
  const [isck, setisck] = useState(true);
  const [isshow, setisshow] = useState(false);
  // 存储当前页码，初始为 0
  const [currentPage, setCurrentPage] = useState(0);
  // 存储当前显示的数据
  const [displayData, setDisplayData] = useState([]);
  // 标记是否还有更多数据可加载
  const [hasMore, setHasMore] = useState(true);
  // 标记是否正在加载数据
  const [isLoading, setIsLoading] = useState(false);

  // 加载数据的函数
  const loadData = async () => {
    setIsLoading(true); // 开始加载，设置加载状态为 true
    const startIndex = currentPage * PAGE_SIZE;
    const endIndex = startIndex + PAGE_SIZE;
    const newData = filteredTemplates.slice(startIndex, endIndex);

    // 模拟一个异步加载过程，实际使用中可替换为真实的 API 请求
    await new Promise((resolve) => setTimeout(resolve, 500));

    // 如果新数据为空，说明没有更多数据了
    if (newData.length === 0) {
      setHasMore(false);
    } else {
      // 合并新数据到已显示的数据中
      setDisplayData((prevData) => [...prevData, ...newData]);
      // 页码加 1
      setCurrentPage((prevPage) => prevPage + 1);
    }
    setIsLoading(false); // 加载完成，设置加载状态为 false
  };

  // 组件挂载时加载第一页数据
  useEffect(() => {
    loadData();
  }, []);

  // 监听滚动事件
  useEffect(() => {
    const handleScroll = () => {
      // 当滚动到底部且还有更多数据且不在加载中时加载新数据
      if (
        window.innerHeight + window.scrollY >= document.body.offsetHeight &&
        hasMore &&
        !isLoading
      ) {
        loadData();
      }
    };

    // 添加滚动事件监听器
    window.addEventListener("scroll", handleScroll);

    // 组件卸载时移除滚动事件监听器，避免内存泄漏
    return () => {
      window.removeEventListener("scroll", handleScroll);
    };
  }, [hasMore, isLoading]);

  const show = () => {
    setisshow(!isshow);
    setisck(!isck);
  };

  // 筛选模板
  const filterTemplates = () => {
    let filtered = templateData.filter((template) => {
      return template.name.toLowerCase().includes(searchTerm.toLowerCase());
    });
    setFilteredTemplates(filtered);
    setCurrentPage(0); // 重置页码
    setDisplayData([]); // 清空显示数据
    setHasMore(true); // 重置是否还有更多数据的状态
    loadData(); // 重新加载数据
  };

  // 处理搜索输入变化
  const handleSearch = (e) => {
    console.log(e.target.value);
    
    setSearchTerm(e.target.value);
    filterTemplates();
  };
  // const handleSearch

  // 处理单个模板选择
  const handleTemplateSelect = (templateId) => {
    if (selectedTemplateIds.includes(templateId)) {
      setSelectedTemplateIds(
        selectedTemplateIds.filter((id) => id !== templateId)
      );
    } else {
      setSelectedTemplateIds([...selectedTemplateIds, templateId]);
    }
    updateAllSelectedState();
  };

  // 处理全选
  const handleSelectAll = () => {
    if (isAllSelected) {
      setSelectedTemplateIds([]);
      setIsAllSelected(false);
    } else {
      setSelectedTemplateIds(filteredTemplates.map((template) => template.id));
      setIsAllSelected(true);
    }
  };

  // 更新全选状态
  const updateAllSelectedState = () => {
    setIsAllSelected(selectedTemplateIds.length === filteredTemplates.length);
  };

  // 处理设置为推荐
  const handleSetRecommended = () => {
    // 这里可以添加调用后端接口等实际逻辑，目前仅打印选中的id
    console.log("设置为推荐的模板id:", selectedTemplateIds);
    // 模拟更新数据，实际应用中需要和后端交互
    const updatedTemplates = filteredTemplates.map((template) => {
      if (selectedTemplateIds.includes(template.id)) {
        return { ...template, isRecommended: true };
      }
      return template;
    });
    setFilteredTemplates(updatedTemplates);
    // 更新 displayData 以反映推荐状态的变化
    setDisplayData(
      displayData.map((item) => {
        if (selectedTemplateIds.includes(item.id)) {
          return { ...item, isRecommended: true };
        }
        return item;
      })
    );
  };

  // 处理清空筛选条件
  const handleClearFilters = () => {
    setSearchTerm("");
    setFilteredTemplates(originalTemplateData);
    setSelectedTemplateIds([]);
    setIsAllSelected(false);
    setCurrentPage(0); // 重置页码
    setDisplayData([]); // 清空显示数据
    setHasMore(true); // 重置是否还有更多数据的状态
    loadData(); // 重新加载数据
  };

  // 取消收藏
  const handleClear = () => {
    // 过滤掉选中的模板
    const newOriginalTemplates = originalTemplateData.filter(
      (template) => !selectedTemplateIds.includes(template.id)
    );
    setOriginalTemplateData(newOriginalTemplates);

    const newFilteredTemplates = filteredTemplates.filter(
      (template) => !selectedTemplateIds.includes(template.id)
    );
    setFilteredTemplates(newFilteredTemplates);

    // 清空选中的模板id数组
    setSelectedTemplateIds([]);
    // 重置全选状态
    setIsAllSelected(false);
    setCurrentPage(0); // 重置页码
    setDisplayData([]); // 清空显示数据
    setHasMore(true); // 重置是否还有更多数据的状态
    loadData(); // 重新加载数据
  };

  return (
    <div className={styles.container}>
      {/* 搜索输入框 */}
      <input
        type="text"
        placeholder="搜索模板"
        // value={searchTerm}
        ref={searchTerm}
        // onChange={handleSearch}
        className={styles.searchInput}
      />
      <Button onClick={handleSearch}>查询</Button>
      {isck && (
        <div className={styles.ck}>
          <a href="">查看团队/企业模版</a>
          <Button onClick={show}>批量管理</Button>
        </div>
      )}
      {/* 筛选和操作按钮容器 */}
      <div className={styles.filterContainer}>
        {/* 操作按钮 */}
        {isshow && (
          <div className={styles.btn}>
            <button onClick={handleClearFilters} className={styles.button}>
              清空筛选条件
            </button>
            <button onClick={handleSelectAll} className={styles.button}>
              全选
            </button>
            <button onClick={handleClear} className={styles.button}>
              取消收藏
            </button>
            <button onClick={handleSetRecommended} className={styles.button}>
              设置为推荐
            </button>
            <button onClick={show} className={styles.button}>
              完成
            </button>
          </div>
        )}
      </div>

      {/* 模板列表 */}
      <div className={styles.templateList}>
        {displayData.map((template) => (
          <div key={template.id} className={styles.templateItem}>
            <input
              type="checkbox"
              checked={selectedTemplateIds.includes(template.id)}
              onChange={() => handleTemplateSelect(template.id)}
              className={styles.templateCheckbox}
            />
            <div className={styles.templateInfo}>
              <span>
                {template.name} - {template.isRecommended ? "已推荐" : "未推荐"}
              </span>
              <img
                src={template.imageUrl}
                alt={template.name}
                className={styles.templateImage}
              />
            </div>
          </div>
        ))}
        {isLoading && <p>Loading...</p>}
        {!hasMore && <p>No more data to load.</p>}
      </div>
    </div>
  );
};

export default Material;